
<div id="toolbar" style="margin-right: 10px;">
    <button class="btn btn-success" onclick="clickAdd()">新增</button>
</div>
<table id="list-table"></table>

<script>
    $(function () {
        var h = $(window).height();
        $("#list-table").bootstrapTable({
            url:'getRuleList',
            method:'post',
            sidePagination: 'server',
            pagination:true,
            pageSize:20,
            pageList:[10,20,50],
            pageNumber:1,
            height:h - 100,
            search:true,
            searchAlign:'left',
            toolbar:'#toolbar',
            toolbarAlign:'right',
            columns:[{
                title:'PAGE_ID',
                field:'PAGE_ID',
                sortable:true
            },{
                title:'父菜单',
                field:'GROUP_ID',
                sortable:true
            },{
                title:'标题',
                field:'PAGE_NAME',
                sortable:true
            },{
                title:'地址',
                field:'PAGE_URL',
                sortable:true
            },{
                title:'是否基础',
                field:'IS_BASE',
                sortable:true,
                formatter:function (value,rowData,index) {
                    if(value == '1'){
                        return '是';
                    }
                    return '否';
                }
            },{
                title:'备注',
                field:'REMARK',
                sortable:true
            },{
                title:'操作',
                field:'PAGE_ID',
                halign:'center',
                align:'center',
                formatter:function (value,rowData,index) {
                    var html1 = "<a class='btn btn-xs btn-success' style='margin: 2px;' onclick='clickEdit(\"" + value + "\")'><i class='fa fa-pencil'></i></a>";
                    var html2 = "<a class='btn btn-xs btn-danger' style='margin: 2px;' onclick='clickDelete(\"" + value + "\")'><i class='fa fa-trash'></i></a>"
                    return html1 + html2;
                }
            }],
            queryParams:function (params) {
                return params;
            },
            responseHandler:function (res) {
                // res = JSON.parse(res);
                console.log(res)
                return res;
            }
        });
    });

    function clickEdit(id) {
        var h = $(window).height()*0.8;
        var w = $(window).width()*0.8;
        if(w > 1200){
            w = 1200;
        }
        layer.open({
            title:'编辑权限信息',
            area:[w + 'px', h + 'px'],
            type:2,
            content:"{:url('edit')}?id="+id,
            end:function () {
                $("#list-table").bootstrapTable('refresh');
            }
        });
    }

    function clickDelete(id) {
        layer.confirm('确认删除该权限吗？',{icon:5},function (index) {
            layer.close(index);
            $.ajax({
                url: "{:url('deleteRule')}",
                data: {id:id},
                type:"post",
                success: function (text) {
                    console.log(text);
                    var ret = JSON.parse(text);
                    if(ret['code'] == '200'){
                        layer.alert(ret['msg'],{icon:1},function (index) {
                            $("#list-table").bootstrapTable('refresh');
                            layer.close(index);
                        });
                    }
                    else{
                        layer.alert(ret['msg'],{icon:2});
                    }
                },
                error: function (jqXHR, textStatus, errorThrown) {
                    alert(errorThrown);
                }
            });
        })
    }

    function clickAdd() {
        var h = $(window).height()*0.8;
        var w = $(window).width()*0.8;
        if(w > 1200){
            w = 1200;
        }
        layer.open({
            title:'新增权限',
            area:[w + 'px', h + 'px'],
            type:2,
            content:"{:url('add')}",
            end:function () {
                $("#list-table").bootstrapTable('refresh');
            }
        });
    }

</script>